<template>
  <div class="CommonPassengerPeopleList" @click="getChangeData">
    <div
      class="d-flex justify-content-between align-items-center wrapper van-hairline--bottom"
    >
      <div class="d-flex align-teims-center flex-1">
        <div style="margin-left: 10px;">
          <div>
            <span class="name">{{ state.list.member_name }}</span>
            <span>{{
              state.list.department_name
                ? state.list.department_name
                : state.list.trip_department_name
            }}</span>
            <img
              src="../img/shen.png"
              v-if="
                state.list.approval_id == 1 && state.list.out_reservation != '0'
              "
            />
            <img
              src="../img/wai.png"
              v-if="state.list.out_reservation == '0'"
            />
          </div>
          <div class="car-id" v-if="state.list.common_passenger_certificates">
            {{
              state.list.common_passenger_certificates[0].certification_name
            }}：{{
              $HideInfoId(
                state.list.common_passenger_certificates[0]
                  .certification_number,
                store.state.configureInfo.certificates_desensitization === "1"
                  ? "1"
                  : "0"
              )
            }}
          </div>
          <div>
            手机号：
            {{
              $HideInfoPhone(
                state.list.member_phone,
                store.state.configureInfo.phone_desensitization
              ) || "手机号缺失"
            }}
          </div>
          <div class="car-id" v-if="route.name == 'SearchTripPeople'">
            成本中心：{{ state.list.cost_name }}
          </div>
        </div>
      </div>
      <div
        class="del"
        @click.stop="delPeople"
        v-if="
          state.member_id != state.list.member_id &&
            route.name != 'SearchTripPeople'
        "
      >
        <van-icon name="delete" color="#999" size="18" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { Toast, Dialog } from "vant";
import { useRoute } from "vue-router";
import { reactive, getCurrentInstance, computed, onMounted } from "vue";
import { useStore } from "vuex";

const props = defineProps({
  list: {
    type: Object
  },
  num: {
    type: Number
  },
  total: {
    type: Number
  }
});

const emit = defineEmits(["getChangePeople", "delSuccess"]);
const { proxy } = getCurrentInstance();
const route = useRoute();
const store = useStore();

const state = reactive({
  member_id: localStorage.memberId,
  list: {}
});

onMounted(() => {
  state.list = JSON.parse(JSON.stringify(props.list));
});

// 计算属性
const computed_state = reactive({
  // 预订页 所有房间选中的出行人
  allChangeTripPeopleList: computed(() => {
    return store.state.allChangeTripPeopleList;
  }),
  // 企业配置审批类型。  1：事前 2：事中  3：无须审批
  approval_type: computed({
    get: () => store.state.configureInfo.approval_type
  })
});

const getChangeData = () => {
  if (
    state.list.audit_description == "1" &&
    computed_state.approval_type == "1"
  ) {
    Toast("此人需要审批，需提交审批单才能为其进行预订");
    return false;
  } else if (state.list.audit_description == "2") {
    Toast("您没有此人的预订权限");
    return false;
  }
  if (props.num == props.total) {
    Toast(`出行人最多选择${props.total}人`);
    return false;
  }
  emit("getChangePeople", state.list);
};

const delPeople = () => {
  Dialog.confirm({
    title: "标题",
    message: "确认删除出行人？",
    confirmButtonColor: "#208cff",
    'z-index': 200000,
    'zIndex': 200000
  })
    .then(async () => {
      const url = "/security/v1/commonPassenger/removeCommonPassenger";
      const data = {
        common_passenger_id: state.list.common_passenger_id
      };
      let res = await proxy.$axiosJson(url, data);
      if (res.biz_result === "SUCCESS" && res.ret_code === "10000") {
        Toast("删除成功!");
        emit("delSuccess");
      } else {
        Toast(ret.ret_msg);
      }
    })
    .catch(() => {
      return false;
    });
};
</script>

<style lang="less" scoped>
.CommonPassengerPeopleList {
  .sc(14px, #7c7b7b);
  font-weight: 500;
  .wrapper {
    padding: 20px 15px;
    img {
      width: 16px;
      height: 16px;
      margin-left: 5px;
    }
    .name {
      .sc(14px, #333);
      margin-right: 5px;
    }
    .car-id {
      padding: 10px 0;
    }
    .del {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
